<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小邵改装</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', path='/css/style.css') }}" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 标题和用户信息 -->
        <div class="flex justify-between items-center mb-8">
            <div class="text-center flex-1">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">
                    <i class="fas fa-qrcode text-blue-600 mr-3"></i>
                    小邵改装
                </h1>
                <p class="text-gray-600">智能生成车辆功能二维码</p>
            </div>
            <div class="flex items-center space-x-4">
                <div class="text-right">
                    <p class="text-sm text-gray-600">欢迎，</p>
                    <p class="font-medium text-gray-800" id="userDisplayName">用户</p>
                </div>
                <a 
                    id="adminLink"
                    href="/admin"
                    class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 hidden"
                    title="用户管理"
                >
                    <i class="fas fa-users-cog mr-1"></i>
                    管理
                </a>
                <a 
                    id="historyLink"
                    href="#"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
                    title="历史记录"
                >
                    <i class="fas fa-history mr-1"></i>
                    历史记录
                </a>
                <button 
                    id="logoutBtn"
                    class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
                    title="退出登录"
                >
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </div>
        </div>

        <!-- 主要内容卡片 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
            <!-- 1. 输入框 -->
            <div class="mb-6">
                <label for="inputText" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-edit text-blue-500 mr-2"></i>
                    输入内容
                </label>
                <div class="relative">
                    <textarea 
                        id="inputText" 
                        name="inputText"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-none"
                        placeholder="请输入内容（1424位字符）"
                        maxlength="1424"
                        rows="4"
                    ></textarea>
                    <div class="absolute bottom-3 right-3">
                        <span id="charCount" class="text-sm text-gray-400 bg-white px-2 py-1 rounded">0/1424</span>
                    </div>
                </div>
                <div id="inputError" class="hidden mt-2 text-sm text-red-600">
                    <i class="fas fa-exclamation-circle mr-1"></i>
                    <span id="errorMessage"></span>
                </div>
            </div>

            <!-- 2. 车型选择 -->
            <div class="mb-6">
                <label for="carModel" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-car text-blue-500 mr-2"></i>
                    车型
                </label>
                <select 
                    id="carModel" 
                    name="carModel"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 appearance-none bg-white"
                    style="background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206L8%2010L12%206%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; padding-right: 40px;"
                >
                    <option value="">请选择车型</option>
                    <option value="摇光">摇光</option>
                    <option value="瑞虎9">瑞虎9</option>
                    <option value="虎8L">虎8L</option>
                    <option value="艾瑞泽8">艾瑞泽8</option>
                </select>
            </div>

            <!-- 3. 功能多选 -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-cogs text-blue-500 mr-2"></i>
                    功能
                </label>
                <div id="functionOptions" class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-3">
                    <!-- 功能选项将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 4. 按钮组 -->
            <div class="flex gap-4 mb-6">
                <button 
                    id="generateBtn"
                    class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 px-6 rounded-lg font-medium hover:from-blue-700 hover:to-blue-800 transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                >
                    <i class="fas fa-magic mr-2"></i>
                    生成
                </button>
                <button 
                    id="clearBtn"
                    class="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 text-white py-3 px-6 rounded-lg font-medium hover:from-gray-600 hover:to-gray-700 transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                >
                    <i class="fas fa-trash mr-2"></i>
                    清除
                </button>
            </div>
        </div>

        <!-- 结果展示区域 -->
        <div class="flex flex-col gap-6 md:flex-col">
            <!-- 5. 输出数字 -->
            <div class="bg-white rounded-2xl shadow-xl p-6 order-1">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-hashtag text-green-500 mr-2"></i>
                    输出数字
                </h3>
                <div id="outputNumber" class="text-base font-normal text-gray-800 text-left py-4 bg-gray-50 rounded-lg break-all whitespace-pre-line max-h-32 overflow-auto">
                    --
                </div>
            </div>
            <!-- 6. 图片展示 -->
            <div class="bg-white rounded-2xl shadow-xl p-6 order-2">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-image text-purple-500 mr-2"></i>
                    二维码图片
                </h3>
                <div id="qrImage" class="flex items-center justify-center py-8 bg-gray-50 rounded-lg">
                    <div class="text-gray-400 text-center">
                        <i class="fas fa-qrcode text-4xl mb-2"></i>
                        <p>等待生成二维码</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载状态 -->
        <div id="loadingOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg p-6 flex items-center space-x-3">
                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                <span class="text-gray-700">正在生成...</span>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', path='/js/main.js') }}"></script>
    <script src="{{ url_for('static', path='/js/watermark.js') }}"></script>
</body>
</html> 